<template>
  <div class="verification-bill">
    <div class="base-info">
      <a-form :model="formState" autocomplete="off">
        <div class="base-info">
          <div class="title">基础信息</div>
          <a-row :gutter="8">
            <a-col v-for="(item, index) in formItemColumn" :key="index" :span="6">
              <a-form-item v-bind="item" :label-col="{ style: 'width:110px' }" :wrapper-col="{ style: 'calc(100% - 110px)' }">
                <template v-if="item.name === 'remark'">
                  <span v-if="type === 2">-</span>
                  <span v-else>{{ (passData[0] as any)[item.name] }}</span>
                </template>
                <template v-else>{{ (passData[0] as any)[item.name] }}</template>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div class="customer-account">
      <div class="title">客户流水</div>
      <div class="tip">
        已选金额:
        <span class="emphasis-item">{{ selectDepositAmount }}</span
        >元
      </div>
      <vxe-table border ref="customerAccountRef" show-overflow="title" height="200" :data="passData" :scroll-y="{ enabled: true, gt: 30 }">
        <vxe-column type="checkbox" width="50" fixed="left"></vxe-column>
        <vxe-column field="orderNum" title="流水单号" min-width="140" fixed="left"></vxe-column>
        <vxe-column field="depositPrice" title="来款金额" min-width="90"></vxe-column>
        <vxe-column field="unChargeOffPrice" title="剩余金额" min-width="90"></vxe-column>
        <vxe-column field="payerName" title="来款渠道" min-width="140"></vxe-column>
        <vxe-column field="remark" title="来款备注" min-width="140"></vxe-column>
        <vxe-column field="proceedsTime" min-width="135" title="来款时间">
          <template #default="{ row }">
            {{ dayjs(Number(row.proceedsTime)).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </vxe-column>
        <vxe-column field="createName" title="登记人" min-width="70"></vxe-column>
        <vxe-column field="createTime" min-width="135" title="登记时间">
          <template #default="{ row }">
            {{ dayjs(Number(row.createTime)).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </vxe-column>
        <vxe-column field="approvalUserName" title="审核人" min-width="70" fixed="right"></vxe-column>
        <vxe-column field="approvalTime" title="审核时间" min-width="135" fixed="right">
          <template #default="{ row }">
            {{ dayjs(Number(row.approvalTime)).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="customer-bill-info">
      <div class="title">客户账单明细</div>
      <div class="search-content">
        <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle" :spanCount="8"></super-search>
      </div>
      <div class="table-content">
        <div class="tip">
          <div class="left">
            <span style="margin-right: 8px">
              已选未核销金额:
              <span class="emphasis-item">{{ selectUnchargeOff }}</span
              >元
            </span>
            <span>
              已选运单数:
              <span class="emphasis-item">{{ selectWaybillNum }}</span>
            </span>
          </div>
          <div class="right">
            <span style="margin-right: 8px">账单应收总金额: {{ billInfo.sumReceivablePrice }}</span>
            <span>账单未核销金额: {{ billInfo.sumUnChargeOffPrice }}</span>
          </div>
        </div>
        <div class="table-operation-btn">
          <a-button style="margin-right: 16px" type="primary" @click="addFeeHandle">移入费用</a-button>
          <a-button type="danger" @click="outCostHandle">移出费用</a-button>
        </div>
        <vxe-table border ref="customerBillRef" show-overflow="title" height="300" :data="billInfo.costList" :scroll-y="{ enabled: true, gt: 30 }">
          <vxe-column type="expand" width="50" fixed="left">
            <template #content="{ row }">
              <div class="child-table">
                <vxe-table
                  border
                  show-overflow="title"
                  height="250"
                  :data="row.costList"
                  :row-config="{ keyField: 'id', height: 30 }"
                  :scroll-y="{ enabled: true, gt: 10 }"
                  :expand-config="{ reserve: true }"
                  @checkbox-all="selectAllEvent($event, row)"
                  @checkbox-change="selectChangeEvent($event, row)"
                  :checkbox-config="{checkMethod: ({ row }: any) => [1,0].includes(row.state) }"
                >
                  <vxe-column type="checkbox" width="50" fixed="left"></vxe-column>
                  <vxe-column field="waybillNum" title="运单号" min-width="140" fixed="left"></vxe-column>
                  <vxe-column field="depositTime" title="拣货时间" min-width="135" fixed="left">
                    <template #default="{ row }">
                      {{ dayjs(Number(row.depositTime)).format("YYYY-MM-DD HH:mm:ss") }}
                    </template>
                  </vxe-column>
                  <vxe-column field="channelName" title="渠道" min-width="90"></vxe-column>
                  <vxe-column field="approvalUserName" title="审核人" min-width="90"></vxe-column>
                  <vxe-column field="approvalTime" min-width="135" title="审核时间">
                    <template #default="{ row }">
                      {{ dayjs(Number(row.approvalTime)).format("YYYY-MM-DD HH:mm:ss") }}
                    </template>
                  </vxe-column>
                  <vxe-column field="costName" title="费用名称" min-width="90"></vxe-column>
                  <vxe-column field="clearingUnitPrice" title="单价" min-width="70"></vxe-column>
                  <vxe-column field="number" title="数量" min-width="70"></vxe-column>
                  <vxe-column field="totalPrice" title="金额" min-width="70"></vxe-column>
                  <vxe-column field="unChargeOffPrice" title="未核销金额" min-width="90"></vxe-column>
                  <vxe-column field="state" title="状态" min-width="70" fixed="right">
                    <template #default="{ row }">
                      <a-tag v-if="row.state === 0" color="#cccc"> 未核销 </a-tag>
                      <a-tag v-if="row.state === 1" color="#2db7f5"> 部分核销 </a-tag>
                      <a-tag v-if="row.state === 3" color="#f40"> 已撤回 </a-tag>
                      <a-tag v-if="row.state === 2" color="#87d068"> 已核销 </a-tag>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="billNum" title="对账单号" min-width="140" fixed="left"></vxe-column>
          <vxe-column field="state" title="核销状态" min-width="80">
            <template #default="{ row }">
              <a-tag v-if="row.state === 0" color="#cccc"> 未核销 </a-tag>
              <a-tag v-if="row.state === 1" color="#2db7f5"> 部分核销 </a-tag>
              <a-tag v-if="row.state === 3" color="#f40"> 已撤回 </a-tag>
              <a-tag v-if="row.state === 2" color="#87d068"> 审批通过 </a-tag>
            </template>
          </vxe-column>
          <vxe-column field="price" title="应收金额" min-width="90"></vxe-column>
          <vxe-column field="chargeOffPrice" title="已核销金额" min-width="120"></vxe-column>
          <vxe-column field="unChargeOffPrice" title="未核销金额" min-width="120"></vxe-column>
          <vxe-column field="waybillNumber" title="包含运单数" min-width="120"></vxe-column>
          <vxe-column field="createName" title="出账人" min-width="70"></vxe-column>
          <vxe-column field="createTime" min-width="135" title="出账时间">
            <template #default="{ row }">
              {{ dayjs(Number(row.createTime)).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
    <div class="operation-btn">
      <a-button type="primary" style="margin-right: 16px" v-debounce @click="submitHandle">核销</a-button>
      <a-button @click="$emit('update:visible', false)">关闭</a-button>
    </div>
    <!-- 弹窗 -->
    <a-modal
      v-model:visible="dialogOpts.visible"
      :maskClosable="false"
      :keyboard="false"
      :closable="['AddFee'].includes(dialogOpts.component)"
      :statementOpts="billInfo.costList"
      :footer="null"
      :title="dialogOpts.title"
      :width="dialogOpts.width"
    >
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import AddFee from "../addFee/index.vue";
export default {
  components: {
    AddFee
  }
};
</script>
<script lang="ts" setup>
import dayjs from "dayjs";
import ModalHook from "@/hook/modalHook";
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { searchItemList } from "./data";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: WaterVerification.ListRows[];
    type: number; // 1 单个 2批量
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", vis: boolean): void;
  (e: "submit"): void;
}>();
const { type, passData, visible } = toRefs(props);
const { dialogOpts, selectMap, loading, billInfo, formState, formItemColumn, init, customerAccountRef, selectDepositAmount, searchForm, customerBillRef, selectUnchargeOff, selectWaybillNum } =
  InitHook({ type });
const { selectAllEvent, submitHandle, searchHandle, selectChangeEvent, outCostHandle, addFeeHandle } = OperationHook({
  selectMap,
  searchForm,
  loading,
  billInfo,
  passData,
  customerAccountRef,
  emit,
  dialogOpts,
  type
});
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init(passData);
    else {
      selectMap.value = {};
    }
  }
);
const { dialogSubmitHandle } = ModalHook({
  dialogOpts,
  callBack: () => searchHandle()
});
init(passData);
</script>
<style lang="stylus" scoped>
.verification-bill{
    padding: 12px;
    padding-bottom: 100px;
    background-color: #fff;
    .emphasis-item {
        color: #fe8100;
        font-weight: 600;
    }
    .title {
        padding: 12px 0;
        font-weight: 600;
    }
    .base-info{
        border-bottom: 1px dashed #ccc;
    }
    :deep(.ant-form-item){
        margin-bottom: 12px;
    }
    .customer-account{
        .tip {
            padding-bottom: 12px;
            font-weight: 600;
        }
    }
    .search-content{
        .search-item{
            display: flex;
            align-items: center;
            >label{
                white-space: nowrap;
                padding-right: 8px;
            }
            :deep(.ant-select){
                width: 100%;
            }
        }
    }
    .table-content{
        margin-top: 12px;
        .tip{
            font-weight: 600;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 12px;
        }
        .table-operation-btn{
          margin-bottom: 12px;
        }
        .child-table{
            padding: 12px;
        }
    }
    .operation-btn{
      position: absolute;
      background-color: #fff;
      bottom: 0;
      left: 0;
      padding: 12px;
      width: 100%;
      font-weight: 600;
      text-align: center;
      z-index: 999;
      box-shadow: 0px 0px 5px #ccc;
    }
}
</style>
